<script setup lang="ts">
import { TabsContainer } from "@/models/containers";
import { zipWith } from "lodash-es";
import { inject, ref } from "vue";
import * as injectKeys from "@/services/injectKeys";

const props = defineProps<{ model: TabsContainer }>();
const model = props.model;

const dynamicComponent = inject(injectKeys.dynamicComponentKey)!;

const infos = zipWith(
  model.names,
  model.children,
  model.icons,
  (name, children, icon) => {
    return {
      name,
      box: children,
      icon,
    };
  }
);

const tab = ref(model.names[0]);

function getTabPositionInfos(position: TabsContainer["tabPosition"]) {
  const result = {
    tabVertical: false,
    panelVertical: false,
    boxDir: "",
  };

  switch (position ?? "top") {
    case "top":
      result.boxDir = "column";
      break;

    case "bottom":
      result.boxDir = "column-reverse";
      break;

    case "left":
      result.boxDir = "row";
      result.panelVertical = true;
      result.tabVertical = true;
      break;

    case "right":
      result.boxDir = "row-reverse";
      result.panelVertical = true;
      result.tabVertical = true;
      break;

    default:
      break;
  }

  return result;
}

const posInfos = getTabPositionInfos(model.tabPosition);
</script>

<template>
  <div class="pybi-tabs" :style="{ flexDirection: posInfos.boxDir }">
    <q-tabs
      v-model="tab"
      :class="model.tabsClasses"
      v-bind="model.tabsProps"
      :vertical="posInfos.tabVertical"
      :style="model.tabsStyles"
    >
      <q-tab
        v-for="info in infos"
        :name="info.name"
        :icon="info.icon"
        :label="info.name"
      />
    </q-tabs>

    <q-tab-panels
      v-model="tab"
      animated
      swipeable
      transition-prev="jump-up"
      transition-next="jump-up"
      :class="model.panelsClasses"
      v-bind="{ ...model.panelsProps, keepAlive: true }"
      :vertical="posInfos.panelVertical"
      style="width: 100%"
      :style="model.panelsStyles"
    >
      <q-tab-panel v-for="info in infos" :name="info.name">
        <component :is="dynamicComponent" :component="info.box"></component>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</template>

<style scoped lang="less">
.pybi-tabs {
  width: 100%;
  display: flex;
  //   flex-direction: column-reverse;
}
</style>
